import React, { useState } from 'react'
import {
  Form,
  Input,
  Button,
  Toast,
} from 'antd-mobile'
import tu from '../../img/1.png'
import http from '../../api/http'
import {useNavigate} from 'react-router-dom'

function Index() {
  let nanvigate = useNavigate()
  const onFinish = async (values) => {
    const res = await http.post('/api/login', values);
    const { code, message,data } = res.data;
    if (code == 10000) {
      Toast.show({
        icon: 'success',
        content: message,
      })
      localStorage.setItem('token',data.accessToken)

      nanvigate('/home')
    }else{
      Toast.show({
        icon: 'fail',
        content: message,
      })
    }
  }

  const [flag, setFlag] = useState(true);
  const handleSao = () => {
    setFlag(false)
  }
  const back = () => {
    setFlag(true)
  }
  return (
    <div>
      {
        flag == 1 ? <div>
          <Form
            onFinish={onFinish}
            layout='horizontal'
            footer={
              <Button block type='submit' color='primary' size='large'>
                登录
              </Button>
            }
          >
            <Form.Header>
              <h2>账号密码登录</h2>
            </Form.Header>
            <Form.Item
              name='username'
              label='用户名'
              rules={[{ required: true, message: '用户名不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入用户名' />
            </Form.Item>

            <Form.Item
              name='password'
              label='密码'
              rules={[{ required: true, message: '密码不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入密码' />
            </Form.Item>
            <Button size='mini' color='primary' onClick={() => handleSao()}>
              扫码登录
            </Button>
          </Form>

        </div>
          :
          <div>
            <Form
              layout='horizontal'
              footer={
                <Button block type='submit' color='primary' size='large' onClick={() => back()}>
                  返回账号密码登录
                </Button>
              }
            >
              <Form.Header>
                <h2>扫码登录</h2>
              </Form.Header>
              <img style={{ width: '100%' }} src={tu} alt="" />
            </Form>
          </div>
      }

      {/* -------------------------------------------------- */}

    </div>
  )
}

export default Index
